<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Limitless - Responsive Web Application Kit by Eugene Kopyov</title>

	<!-- Global stylesheets -->
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
	<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/bootstrap_limitless.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/layout.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/components.min.css" rel="stylesheet" type="text/css">
	<link href="assets/css/colors.min.css" rel="stylesheet" type="text/css">
	<!-- /global stylesheets -->

	<!-- Core JS files -->
	<script src="assets/js/main/jquery.min.js"></script>
	<script src="assets/js/main/bootstrap.bundle.min.js"></script>
	<!-- /core JS files -->

	<!-- Theme JS files -->
	<script src="assets/js/plugins/prism.min.js"></script>
	<script src="assets/js/plugins/sticky.min.js"></script>
	
	<script src="assets/js/main/app.js"></script>
	<script src="assets/js/pages/components_scrollspy.js"></script>
	<!-- /theme JS files -->

</head>

<body data-spy="scroll" data-target=".sidebar-component-right">

	<!-- Main navbar -->
	<div class="navbar navbar-expand-md navbar-light">
		<div class="navbar-header navbar-dark d-none d-md-flex align-items-md-center">
			<div class="navbar-brand navbar-brand-md">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_light.png" alt="">
				</a>
			</div>
	
			<div class="navbar-brand navbar-brand-xs">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_icon_light.png" alt="">
				</a>
			</div>
		</div>

		<div class="d-flex flex-1 d-md-none">
			<div class="navbar-brand mr-auto">
				<a href="index.html" class="d-inline-block">
					<img src="assets/images/logo_dark.png" alt="">
				</a>
			</div>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile">
				<i class="icon-tree5"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-main-toggle" type="button">
				<i class="icon-paragraph-justify3"></i>
			</button>
			<button class="navbar-toggler sidebar-mobile-component-toggle" type="button">
				<i class="icon-unfold"></i>
			</button>
		</div>

		<div class="collapse navbar-collapse" id="navbar-mobile">
			<ul class="navbar-nav">
				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-main-hide d-none d-md-block">
						<i class="icon-paragraph-justify3"></i>
					</a>
				</li>

				<li class="nav-item">
					<a href="#" class="navbar-nav-link sidebar-control sidebar-component-toggle d-none d-md-block">
						<i class="icon-transmission"></i>
					</a>
				</li>
			</ul>

			<ul class="navbar-nav ml-md-auto">
				<li class="nav-item dropdown">
					<a href="#" class="navbar-nav-link">
						<i class="icon-history mr-2"></i>
						Changelog
						<span class="badge bg-warning-400 badge-pill position-static ml-md-2">2.0</span>
					</a>					
				</li>
			</ul>
		</div>
	</div>
	<!-- /main navbar -->


	<!-- Page content -->
	<div class="page-content">

		<!-- Main sidebar -->
		<div class="sidebar sidebar-dark sidebar-main sidebar-expand-md">

			<!-- Sidebar mobile toggler -->
			<div class="sidebar-mobile-toggler text-center">
				<a href="#" class="sidebar-mobile-main-toggle">
					<i class="icon-arrow-left8"></i>
				</a>
				Navigation
				<a href="#" class="sidebar-mobile-expand">
					<i class="icon-screen-full"></i>
					<i class="icon-screen-normal"></i>
				</a>
			</div>
			<!-- /sidebar mobile toggler -->


			<!-- Sidebar content -->
			<div class="sidebar-content">

        		<!-- Support -->
				<div class="card card-body">
					<a href="http://kopyov.ticksy.com" class="btn bg-success-400 btn-block" target="_blank"><i class="icon-lifebuoy mr-2"></i> Limitless support</a>
				</div>
				<!-- /support -->


				<!-- Main navigation -->
				<div class="card card-sidebar-mobile">
					<ul class="nav nav-sidebar" data-nav-type="accordion">
						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Main</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="index.html" class="nav-link">Introduction</a></li>
						<li class="nav-item"><a href="main_getting_started.html" class="nav-link">Getting started</a></li>
						<li class="nav-item"><a href="main_starter_kit.html" class="nav-link">Starter kit</a></li>
						<li class="nav-item"><a href="main_rtl.html" class="nav-link">RTL layout</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Basic functionality</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="base_scss_css.html" class="nav-link">SCSS and CSS</a></li>
						<li class="nav-item"><a href="base_scss_compile.html" class="nav-link">Compiling SCSS</a></li>
						<li class="nav-item nav-item-submenu nav-item-expanded nav-item-open">
							<a href="#" class="nav-link">Plugins</a>
							<ul class="nav nav-group-sub" data-submenu-title="Plugins">
								<li class="nav-item"><a href="plugins_forms.html" class="nav-link">Forms</a></li>
								<li class="nav-item"><a href="plugins_forms_styling.html" class="nav-link">Form styling</a></li>
								<li class="nav-item"><a href="plugins_editors.html" class="nav-link">Editors</a></li>
								<li class="nav-item"><a href="plugins_uploaders.html" class="nav-link">Uploaders</a></li>
								<li class="nav-item"><a href="plugins_extensions.html" class="nav-link">Extensions</a></li>
								<li class="nav-item"><a href="plugins_notifications.html" class="nav-link">Notifications</a></li>
								<li class="nav-item"><a href="plugins_pickers.html" class="nav-link">Pickers</a></li>
								<li class="nav-item"><a href="plugins_tables.html" class="nav-link active">Tables</a></li>
								<li class="nav-item"><a href="plugins_ui.html" class="nav-link">UI</a></li>
								<li class="nav-item"><a href="plugins_vis.html" class="nav-link">Visualization</a></li>
							</ul>
						</li>

						<li class="nav-item"><a href="base_bootstrap.html" class="nav-link">Bootstrap</a></li>
						<li class="nav-item"><a href="base_color_system.html" class="nav-link">Color system</a></li>
						<li class="nav-item"><a href="base_helpers.html" class="nav-link">Helpers</a></li>
						<li class="nav-item"><a href="base_themes.html" class="nav-link">Themes</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Layout options</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="layout_overview.html" class="nav-link">Layouts</a></li>
						<li class="nav-item"><a href="layout_sidebars.html" class="nav-link">Sidebars</a></li>
						<li class="nav-item"><a href="layout_navbars.html" class="nav-link">Navbars</a></li>
						<li class="nav-item"><a href="layout_v_nav.html" class="nav-link">Vertical navigation</a></li>
						<li class="nav-item"><a href="layout_h_nav.html" class="nav-link">Horizontal navigation</a></li>
						<li class="nav-item"><a href="layout_page_header.html" class="nav-link">Page header</a></li>

						<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Other</div> <i class="icon-menu"></i></li>
						<li class="nav-item"><a href="other_credits.html" class="nav-link">Sources and credits</a></li>
						<li class="nav-item"><a href="other_changelog.html" class="nav-link">Changelog <span class="badge badge-pill bg-warning-400 ml-auto">version 2.0</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /main navigation -->

		</div>
		<!-- /main sidebar -->


		<!-- Main content -->
		<div class="content-wrapper">

			<!-- Page header -->
			<div class="page-header">
				<div class="page-header-content header-elements-md-inline">
					<div class="page-title d-flex">
						<h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Limitless</span> - Tables</h4>
						<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
					</div>

					<div class="header-elements d-none py-0 mb-3 mb-md-0">
						<div class="breadcrumb">
							<a href="index.html" class="breadcrumb-item"><i class="icon-home2 mr-2"></i> Home</a>
							<span class="breadcrumb-item active">Tables</span>
						</div>
					</div>
				</div>
			</div>
			<!-- /page header -->
			

			<!-- Content area -->
			<div class="content pt-0">

				<!-- Inner container -->
				<div class="d-flex align-items-start flex-column flex-md-row">

					<!-- Left content -->
					<div class="order-2 order-md-1">

							<!-- Data tables -->
							<div class="card" id="data">
								<div class="card-header header-elements-md-inline">
									<h5 class="card-title">Data tables</h5>
									<div class="header-elements d-flex justify-content-between">
										<span class="badge bg-slate">Dynamic</span>
										<span class="text-muted mx-3">/tables/datatables/</span>
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
									</div>
								</div>

								<div class="card-body">
									<div class="mb-4">
										<h6 class="font-weight-semibold">Overview</h6>
										<p>DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. DataTables library is compatible with IE6 and newer. The extensions require IE8 or newer. All other <i>evergreen</i> browsers (Chrome, Firefox, Safari, Opera) are fully supported.</p>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Usage</h6>
										<div class="mb-3">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script src="../../../../global_assets/js/main/jquery.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script src="../../../../global_assets/js/plugins/tables/datatables/datatables.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="mb-3">
											<p>Add table markup:</p>
											<pre><code class="language-markup">&lt;!-- Add table -->
&lt;table class="table datatable-basic">
	&lt;thead>
		&lt;tr>
			&lt;th>...&lt;/th>
			...
		&lt;/tr>
	&lt;/thead>
	&lt;tbody>
		&lt;tr>
			&lt;td>...&lt;/td>
		&lt;/tr>
		...
	&lt;/tbody>
&lt;/table>
</code></pre>
										</div>

										<div class="mb-3">
											<div class="mb-3">
												<p>Call the plugin via JavaScript:</p>
												<pre><code class="language-javascript">// Basic initialization
$('.datatable-basic').DataTable({
	autoWidth: false,
	dom: '&lt;"datatable-header"fl>&lt;"datatable-scroll"t>&lt;"datatable-footer"ip>',
    language: {
        search: '&lt;span>Filter:&lt;/span> _INPUT_',
        lengthMenu: '&lt;span>Show:&lt;/span> _MENU_',
        paginate: { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
    }
});
</code></pre>
											</div>
										</div>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Datatables extensions</h6>
										<p class="mb-3">The features that DataTables provides can be greatly enhanced by the use of the plug-ins available on this page, which give many new user interaction and configuration options. Extensions added to the Limitless configuration:</p>

										<ul class="list list-extended">
											<li>
												<h6><a href="http://datatables.net/extensions/autofill/">AutoFill extension</a></h6>
												AutoFill adds an Excel like data fill option to DataTables, allowing click and drag over cells, filling in information and incrementing numbers as needed
											</li>

											<li>
												<h6><a href="http://datatables.net/extensions/buttons/">Buttons</a></h6>
												The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. Modules are also provided for data export, printing and column visibility control
											</li>

											<li>
												<h6><a href="http://datatables.net/extensions/colreorder/">ColReorder</a></h6>
												ColReorder adds the ability for the end user to be able to reorder columns in a DataTable through a click and drag operation. This can be useful when presenting data in a table, letting the user move columns that they wish to compare next to each other for easier comparison.
											</li>

											<li>
												<h6><a href="http://datatables.net/extensions/fixedcolumns/">FixedColumns</a></h6>
												FixedColumns "freezes" in place the left most columns in a scrolling DataTable, to provide a guide to the end user (for example an index column)
											</li>

											<li>
												<h6><a href="http://datatables.net/extensions/fixedheader/">FixedHeader</a></h6>
												The FixedHeader plug-in will freeze in place the header, footer and left and/or right most columns in a DataTable, ensuring that title information will remain always visible
											</li>

											<li>
												<h6><a href="http://datatables.net/extensions/keytable/">KeyTable</a></h6>
												KeyTable provides Excel like cell navigation on any table. Events (focus, blur, action etc) can be assigned to individual cells, columns, rows or all cells
											</li>

											<li>
												<h6><a href="http://datatables.net/extensions/responsive/">Responsive</a></h6>
												Responsive will automatically optimise the table's layout for different screen sizes through the dynamic column visibility control, making your tables useful on desktop and mobile screens
											</li>

											<li>
												<h6><a href="http://datatables.net/extensions/rowreorder/">RowReorder</a></h6>
												RowReorder adds the ability for rows in a DataTable to be reordered through user interaction with the table (click and drag / touch and drag). Integration with Editor's multi-row editing feature is also available to update rows immediately
											</li>

											<li>
												<h6><a href="http://datatables.net/extensions/scroller/">Scroller</a></h6>
												A virtual renderer for DataTables, allowing the table to look like it scrolls for the full data set, but actually only drawing the rows required for the current display, for fast operation
											</li>

											<li>
												<h6><a href="http://datatables.net/extensions/select/">Select</a></h6>
												Select adds item selection capabilities to a DataTable. Items can be rows, columns or cells, which can be selected independently, or together. Item selection can be particularly useful in interactive tables where users can perform some action on the table such as editing
											</li>
										</ul>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Datatables documentation</h6>
										<p>Full Datatables documentation can be found online on <a href="http://datatables.net/manual/index" target="_blank">Official library website</a>. It's quite big, with a lot of <a href="http://datatables.net/reference/option/" target="_blank">options</a>, <a href="http://datatables.net/manual/events" target="_blank">events</a> and <a href="http://datatables.net/manual/api" target="_blank">powerful API</a>. Also check out <a href="http://datatables.net/reference/index" target="_blank">Full reference</a> and a <a href="http://datatables.net/manual/index" target="_blank">complete manual</a>. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Datatables library.</p>
									</div>

									<div>
										<h6 class="font-weight-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="font-weight-semibold">File name</td>
														<td>datatables.min.js</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Location</td>
														<td>global_assets/js/plugins/tables/datatables/</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Links</td>
														<td>
															<p>
																<a href="http://datatables.net" class="btn btn-sm bg-danger-400 btn-labeled btn-labeled-left" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="http://datatables.net/manual/index" class="btn btn-sm bg-slate btn-labeled btn-labeled-left" target="_blank">
																	<b><i class="icon-file-text2"></i></b>
																	Full documentation
																</a>
															</p>

															<a href="https://github.com/DataTables/DataTables" class="btn btn-sm bg-blue btn-labeled btn-labeled-left" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /data tables -->


							<!-- Footable -->
							<div class="card" id="footable">
								<div class="card-header header-elements-md-inline">
									<h5 class="card-title">Footable</h5>
									<div class="header-elements d-flex justify-content-between">
										<span class="badge bg-slate">Static</span>
										<span class="text-muted mx-3">footable.min.js</span>
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
									</div>
								</div>

								<div class="card-body">
									<div class="mb-4">
										<h6 class="font-weight-semibold">Overview</h6>
										<p>FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome – No matter how many columns of data you may have in them. Have you ever wanted to show a lot of data in a table, but hate how badly it scales on smaller mobile devices? The FooTable jQuery plugin solves this problem by allowing you to hide certain columns on smaller devices, but still allowing the user to expand each row to see the columns that were hidden.</p>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Usage</h6>
										<div class="mb-3">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load jQuery -->
&lt;script src="../../../../global_assets/js/main/jquery.min.js">&lt;/script>

&lt;!-- Load plugin -->
&lt;script src="../../../../global_assets/js/plugins/tables/footable/footable.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="mb-3">
											<p>Add table markup:</p>
											<pre><code class="language-markup">&lt;!-- Add table -->
&lt;table class="footable">
	&lt;thead>
		&lt;tr>
			&lt;th>Name&lt;/th>
			&lt;th data-hide="phone,tablet">Phone&lt;/th>
			&lt;th data-hide="phone,tablet">Email&lt;/th>
		&lt;/tr>
	&lt;/thead>
	&lt;tbody>
		&lt;tr>
			&lt;td>Bob Builder&lt;/td>
			&lt;td>555-12345&lt;/td>
			&lt;td>bob@home.com&lt;/td>
		&lt;/tr>
	&lt;/tbody>
&lt;/table>
</code></pre>
										</div>

										<div class="mb-3">
											<div class="mb-3">
												<p>Call the plugin via JavaScript:</p>
												<pre><code class="language-javascript">// Basic initialization
$('.footable').footable({
	// options
});
</code></pre>
											</div>
										</div>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Breakpoints</h6>
										<div class="mb-3">
										<p>FooTable works off the concept of breakpoints. These can be customized, but the default breakpoints are:</p>

										<pre><code class="language-javascript">// Default breakpoints
breakpoints: {
	phone: 480,
	tablet: 1024
}
</code></pre>
										</div>

										<p>To change the breakpoints simply pass in a breakpoints option when initializing FooTable</p>
										<pre><code class="language-javascript">// Change breakpoints
$('.footable').footable({
    breakpoints: {
        tiny: 100,
        medium: 555,
        big: 2048
    }
});
</code></pre>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Column Setup</h6>
										<div class="mb-3">
											<p>You then need to tell FooTable which columns to hide on which breakpoints, by specifying <code>data-hide</code> attributes on the table head columns:</p>

											<pre><code class="language-javascript">// Default breakpoints
breakpoints: {
	phone: 480,
	tablet: 1024
}
</code></pre>
										</div>

										<div class="mb-3">
											<p>To change the breakpoints simply pass in a breakpoints option when initializing FooTable</p>
											<pre><code class="language-markup">// Table markup
&lt;table class="footable table">
	&lt;thead>
		&lt;tr>
			&lt;th>Name&lt;/th>
			&lt;th data-hide="phone">Job Title&lt;/th>
			&lt;th data-hide="phone,tablet">Status&lt;/th>
			&lt;th data-hide="all">Description&lt;/th>
		&lt;/tr>
	&lt;/thead>
&lt;/table>
</code></pre>
										</div>

										<p>In the above example the following will be true:</p>

										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Column</th>
														<th style="width: 300px;">Data Attribute</th>
														<th>Shown on Desktop</th>
														<th>Shown on Tablet</th>
														<th>Shown on Phone</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td>Name</td>
														<td>[none]</td>
														<td><span class="badge bg-success-400">yes</span></td>
														<td><span class="badge bg-success-400">yes</span></td>
														<td><span class="badge bg-success-400">yes</span></td>
													</tr>
													<tr>
														<td>Job Title</td>
														<td><code>data-hide="phone"</code></td>
														<td><span class="badge bg-success-400">yes</span></td>
														<td><span class="badge bg-success-400">yes</span></td>
														<td><span class="badge bg-danger-400">no</span></td>
													</tr>
													<tr>
														<td>Status</td>
														<td><code>data-hide="phone,tablet"</code></td>
														<td><span class="badge bg-success-400">yes</span></td>
														<td><span class="badge bg-danger-400">no</span></td>
														<td><span class="badge bg-danger-400">no</span></td>
													</tr>
												    <tr>
												        <td>Description</td>
												        <td><code>data-hide="all"</code></td>
												        <td><span class="badge bg-danger-400">no</span></td>
												        <td><span class="badge bg-danger-400">no</span></td>
												        <td><span class="badge bg-danger-400">no</span></td>
												    </tr>
												</tbody>
											</table>
										</div>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Data attributes</h6>
										<p>A list of all the options available on the <code>float</code> method:</p>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Option</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<th colspan="3" class="table-active">Core Data Attributes</th>
													</tr>
													<tr>
														<td><code>data-class</code></td>
														<td>Use to specify a CSS class to apply to all cells in a column</td>
													</tr>
													<tr>
														<td><code>data-hide</code></td>
														<td>Use to specify at which breakpoints to hide the column. Separate multiple breakpoints using a comma</td>
													</tr>
													<tr>
														<td><code>data-ignore</code></td>
														<td>This will stop the column being included in the detail row creation</td>
													</tr>
													<tr>
														<td><code>data-name</code></td>
														<td>This will override the name of the column in the detail row</td>
													</tr>
													<tr>
														<td><code>data-type</code></td>
														<td>This specifies the parser to use to retrieve a cell's value. Default will be 'alpha'. This is useful when trying to sort by numbers/dates</td>
													</tr>
													<tr>
														<td><code>data-value</code></td>
														<td>This specifies a value to use other than the text of the cell</td>
													</tr>
													<tr>
														<td><code>data-group</code></td>
														<td>Used to group column headers together. This will also group the row details together</td>
													</tr>

													<tr>
														<th colspan="3" class="table-active">Sorting Data Attributes</th>
													</tr>
													<tr>
														<td><code>data-sort</code></td>
														<td>Used to disable sorting on the entire table</td>
													</tr>
													<tr>
														<td><code>data-sort-ignore</code></td>
														<td>Used to disable sorting on a specific column</td>
													</tr>
													<tr>
														<td><code>data-sort-initial</code></td>
														<td>Sort a column when FooTable is loaded. Set it to "descending" to sort in descending order initially</td>
													</tr>

													<tr>
														<th colspan="3" class="table-active">Filter Data Attributes</th>
													</tr>													
													<tr>
														<td><code>data-filter</code></td>
														<td>The selector for the input field that will be used to filter your table</td>
													</tr>
													<tr>
														<td><code>data-filter-minimum</code></td>
														<td>Define the minimum number of characters needed before the table data is filtered. Default is <code>2</code> characters</td>
													</tr>
													<tr>
														<td><code>data-filter-timeout</code></td>
														<td>Define the timeout for the delay before the table data is filtered. Default is <code>300</code> milliseconds</td>
													</tr>
													<tr>
														<td><code>data-filter-text-only</code></td>
														<td>Only filter by table cell text and ignore any <code>data-values</code> values</td>
													</tr>

													<tr>
														<th colspan="3" class="table-active">Pagination Data Attributes</th>
													</tr>													
													<tr>
														<td><code>data-page-size</code></td>
														<td>Set the number of rows per page. Default is <code>10</code> rows per page</td>
													</tr>
													<tr>
														<td><code>data-page-first-text</code></td>
														<td>Set the text used to navigate to the <strong>first</strong> page</td>
													</tr>
													<tr>
														<td><code>data-page-previous-text</code></td>
														<td>Set the text used to navigate to the <strong>previous</strong> page</td>
													</tr>
													<tr>
														<td><code>data-page-next-text</code></td>
														<td>Set the text used to navigate to the <strong>next</strong> page</td>
													</tr>
													<tr>
														<td><code>data-page-last-text</code></td>
														<td>Set the text used to navigate to the <strong>last</strong> page</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Plugin events</h6>
										<p>There are a number of events that you can hook into:</p>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Event</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td><code>footable_already_initialized</code></td>
														<td>Fires when the FooTable has already been initialized</td>
													</tr>
													<tr>
														<td><code>footable_initializing</code></td>
														<td>Fires before FooTable starts initializing</td>
													</tr>
													<tr>
														<td><code>footable_initialized</code></td>
														<td>Fires after FooTable has finished initializing</td>
													</tr>
													<tr>
														<td><code>footable_resizing</code></td>
														<td>Fires before FooTable resizes</td>
													</tr>
													<tr>
														<td><code>footable_resized</code></td>
														<td>Fires after FooTable has resized</td>
													</tr>
													<tr>
														<td><code>footable_redrawn</code></td>
														<td>Fires after FooTable has redrawn</td>
													</tr>
													<tr>
														<td><code>footable_breakpoint</code></td>
														<td>Fires inside the resize function, when a breakpoint is hit</td>
													</tr>
													<tr>
														<td><code>footable_column_data</code></td>
														<td>Fires when setting up column data. Plugins should use this event to capture their own info about a column</td>
													</tr>
													<tr>
														<td><code>footable_row_detail_updating</code></td>
														<td>Fires before a detail row is updated</td>
													</tr>
													<tr>
														<td><code>footable_row_detail_updated</code></td>
														<td>Fires after a detail row has been updated</td>
													</tr>
													<tr>
														<td><code>footable_row_collapsed</code></td>
														<td>Fires when a row is collapsed</td>
													</tr>
													<tr>
														<td><code>footable_row_expanded</code></td>
														<td>Fires when a row is expanded</td>
													</tr>
													<tr>
														<td><code>footable_row_removed</code></td>
														<td>Fires when a row is removed</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div>
										<h6 class="font-weight-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="font-weight-semibold">File name</td>
														<td>footable.min.js</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Location</td>
														<td>global_assets/js/plugins/tables/footable/</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Links</td>
														<td>
															<p>
																<a href="http://fooplugins.com/plugins/footable-jquery/" class="btn btn-sm bg-danger-400 btn-labeled btn-labeled-left" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="http://fooplugins.com/footable/demos/index.htm" class="btn btn-sm bg-teal-400 btn-labeled btn-labeled-left" target="_blank">
																	<b><i class="icon-file-eye"></i></b>
																	Demonstration
																</a>
															</p>
															
															<a href="https://github.com/fooplugins/FooTable" class="btn btn-sm bg-blue btn-labeled btn-labeled-left" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /footable -->


							<!-- Handsontable -->
							<div class="card" id="handsontable">
								<div class="card-header header-elements-md-inline">
									<h5 class="card-title">Handsontable</h5>
									<div class="header-elements d-flex justify-content-between">
										<span class="badge bg-slate">Dynamic</span>
										<span class="text-muted mx-3">handsontable/</span>
										<div class="list-icons">
					                		<a class="list-icons-item" data-action="collapse"></a>
					                		<a class="list-icons-item" data-action="remove"></a>
					                	</div>
									</div>
								</div>

								<div class="card-body">
									<div class="mb-4">
										<div class="mb-3">
											<h6 class="font-weight-semibold">Overview</h6>
											<p class="mb-3"><strong>Handsontable</strong> is a JavaScript component for creating Excel-like spreadsheets in modern web apps. Its virtual rendering engine allows you to play with large amounts of data without worrying about performance issues. You will also find it easy to learn and use, however if you get stuck with something, don't hesitate to ask on <a href="https://groups.google.com/forum/#!forum/handsontable" target="_blank">Google Group</a> or <a href="https://github.com/handsontable/handsontable" target="_blank">open a relevant issue</a>.</p>
										</div>

										<h6 class="font-weight-semibold">Features</h6>
										<p class="mb-3">Handsontable is a data grid component with an Excel-like appearance. Built in JavaScript, it integrates with any data source with peak efficiency. It comes with powerful features like data validation, sorting, grouping, data binding, formula support or column ordering. Core features:</p>
										<ul class="list list-extended mb-3">
											<li>Clean code with focus on performance allows you to interact with data sets ranging from 1 to 1 mln rows.</li>
											<li>Appearance similar to Excel allows you to present data in the desired way right on the spot. Edit the CSS file if you need a customized display.</li>
											<li>Maximize the value of your data by playing with it in real time. Integrate into any data source using flexible API.</li>
											<li>Divide large amounts of data into pieces and display small chunks of it in a user-friendly way.</li>
											<li>Lack of dependencies means the code works at its finest and is easy to implement in various enviroments.</li>
											<li>Integrates with our plugin, RuleJS  , which supports most of the Excel functions and calculation capabilities.</li>
											<li>Helps user to shape data in accordance with different criteria. Operations are done on the fly.</li>
											<li>Tablet-friendly view with dedicated UI that simplifies editing and saving data. Easy navigation with on-screen arrow buttons.</li>
										</ul>

										<p>Handsontable comprises of the core engine and functional plugins. You can find a complete list of them below:</p>
										<div class="table-responsive">
											<table class="table table-sm table-striped table-framed">
												<thead>
												<tr>
													<th>Category</th>
													<th>Name</th>
													<th>Description</th>
													<th>Demo</th>
												</tr>
												</thead>
												<tbody>
													<tr>
														<td>Cell feature</td>
														<td>Drag-down</td>
														<td>Select and drag the fill handle (small square in the bottom right corner of the cell) across or down to fill more
													cells with data series
													</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-drag-down.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Cell feature</td>
														<td>Merge cells</td>
														<td>Display cells across multiple rows or columns</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-merge-cells.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Cell feature</td>
														<td>Alignment</td>
														<td>Decide where the content is placed within the cell or a range of cells</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-alignment.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Cell feature</td>
														<td>Read-only</td>
														<td>Lock the cell or a range of cells to disallow altering them</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-read-only.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Cell feature</td>
														<td>Disable cell editing</td>
														<td>Make cell non-editable without changing its appearance and behaviour</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-disable-cell-editing.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Cell type</td>
														<td>Custom HTML</td>
														<td>Display HTML content in a cell or header</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-custom-renderers.html#cell" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Cell type</td>
														<td>Numeric</td>
														<td>Type a custom number format in a cell</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-numeric.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Cell type</td>
														<td>Date</td>
														<td>Use a date picker to select a date</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-date.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Cell type</td>
														<td>Checkbox</td>
														<td>Add a checkbox to a cell to indicate binary choices</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-checkbox.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Cell type</td>
														<td>Select</td>
														<td>Create a simple dropdown list of choices in a cell</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-select.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Cell type</td>
														<td>Dropdown</td>
														<td>Create an advanced dropdown list of choices in a cell</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-dropdown.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Cell type</td>
														<td>Autocomplete</td>
														<td>Choose one of the suggested options while typing or entering a custom value</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-autocomplete.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Cell type</td>
														<td>Password</td>
														<td>Use asterisks to mask the value in a cell</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-password.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Cell type</td>
														<td>Handsontable</td>
														<td>Use Handsontable itself as a custom cell editor</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-handsontable.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Rows and columns</td>
														<td>Fixed rows and columns</td>
														<td>Define which rows or columns are visible while scrolling down or across the table</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-fixed-rows-and-columns.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Rows and columns</td>
														<td>Scrollbars</td>
														<td>Use native scrollbars to navigate within the table</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-scrollbars.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Rows and columns</td>
														<td>Highlighting rows or columns</td>
														<td>Indicate the entire active column or row</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-highlighting-current.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Rows and columns</td>
														<td>Stretching</td>
														<td>Allow columns to the parent container width</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-stretching.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Rows and columns</td>
														<td>Resizing</td>
														<td>Drag the sizing handle to change the size of column or row</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-resizing.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Rows and columns</td>
														<td>Freezing</td>
														<td>Create freeze columns to keep them visible while scrolling</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-freezing.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Rows and columns</td>
														<td>Moving</td>
														<td>Drag rows or columns to swap them within the table</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-moving-rows-and-columns.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Rows and columns</td>
														<td>Pre-populating new rows</td>
														<td>Create empty cells with predefined types or values</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-pre-populating-new-rows.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Validation</td>
														<td>Data validation</td>
														<td>Control what values can be entered into a cell</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-data-validation.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Navigation</td>
														<td>Pagination</td>
														<td>Limited number of records displayed in a single view</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-pagination.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Navigation</td>
														<td>Search for values</td>
														<td>Search through the content with the search field</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-search-for-values.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Sorting</td>
														<td>Sorting data</td>
														<td>Sort data in ascending or descending order throughout the column</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-sorting-data.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Appearance</td>
														<td>Conditional formatting</td>
														<td>Define how specific cells are formatted depending on their values</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-conditional-formatting.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Appearance</td>
														<td>Custom borders</td>
														<td>Apply custom border style around cells or range of cells</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-custom-borders.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Calculation</td>
														<td>Formula support</td>
														<td>Use functions to calculate numerical information within a cell or range of cells</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-formula-support.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Mobile</td>
														<td>Mobiles and tablets</td>
														<td>Display and edit data on mobile phones and tablets</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-mobiles-and-tablets.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Utility</td>
														<td>Context menu</td>
														<td>Invoke a shortcut menu to choose an action related to the selected object</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-context-menu.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Utility</td>
														<td>Custom buttons</td>
														<td>Insert and remove column or row using custom action buttons</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-custom-buttons.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Utility</td>
														<td>Comments</td>
														<td>Provide an additional note about the cell to help better understand its content</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-cell-comments.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Integration</td>
														<td>jQuery</td>
														<td>Full compatibility with jQuery</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-jquery.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Integration</td>
														<td>gRaphaël charts</td>
														<td>Create data visualization using gRaphaël charts</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-graphael-charts.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Integration</td>
														<td>Chroma.js</td>
														<td>Create a heatmap for the values in the table</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-chromajs.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Integration</td>
														<td>Bootstrap</td>
														<td>Apply Bootstrap's styles into Handsontable</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-bootstrap.html" target="_blank">Demo</a></td>
													</tr>
													<tr>
														<td>Integration</td>
														<td>Backbone.js</td>
														<td>See how Backbone's models and collections can work with Handsontable</td>
														<td><a href="http://docs.handsontable.com/0.20.1/demo-backbonejs.html" target="_blank">Demo</a></td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Usage</h6>

										<div class="mb-3">
											<p>Include the following lines of code in the <code>&lt;head></code> section of your HTML:</p>
											<pre><code class="language-markup">&lt;!-- Load library -->
&lt;script src="../../../../global_assets/js/plugins/tables/handsontable/handsontable.min.js">&lt;/script>
</code></pre>
										</div>

										<div class="mb-3">
											<p>Start by creating a container holding the grid:</p>
											<pre><code class="language-markup">&lt;!-- Create container -->
&lt;div id="example">&lt;/div>
</code></pre>
										</div>

										<div class="mb-3">
											<p>Then pass a reference to that div and load some data if you wish:</p>
											<pre><code class="language-javascript">// Add data
var data = [
  ["", "Ford", "Volvo", "Toyota", "Honda"],
  ["2014", 10, 11, 12, 13],
  ["2015", 20, 11, 14, 13],
  ["2016", 30, 15, 12, 13]
];

// Define element
var container = document.getElementById('example');

// Initialize with options
var hot = new Handsontable(container, {
  data: data,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true
});
</code></pre>
										</div>
									</div>

									<div class="mb-4">
										<h6 class="font-weight-semibold">Handsontable documentation</h6>
										Full Handsontable select documentation can be found online on <a href="http://docs.handsontable.com/">Official library website</a>. It's quite big, with a lot of options, examples, events and methods. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Handsontable library.
									</div>

									<div>
										<h6 class="font-weight-semibold">Plugin info</h6>
										<div class="table-responsive">
											<table class="table table-bordered table-striped">
												<thead>
													<tr>
														<th style="width: 250px;">Property</th>
														<th>Description</th>
													</tr>
												</thead>
												<tbody>
													<tr>
														<td class="font-weight-semibold">File name</td>
														<td>handsontable.min.js</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Location</td>
														<td>global_assets/js/plugins/tables/handsontable/</td>
													</tr>
													<tr>
														<td class="font-weight-semibold">Links</td>
														<td>
															<p>
																<a href="http://handsontable.com/" class="btn btn-sm bg-danger-400 btn-labeled btn-labeled-left" target="_blank">
																	<b><i class="icon-mention"></i></b>
																	Official plugin website
																</a>
															</p>

															<p>
																<a href="http://docs.handsontable.com/" class="btn btn-sm bg-slate btn-labeled btn-labeled-left" target="_blank">
																	<b><i class="icon-file-text2"></i></b>
																	Full documentation
																</a>
															</p>

															<a href="https://github.com/handsontable/handsontable" class="btn btn-sm bg-blue btn-labeled btn-labeled-left" target="_blank">
																<b><i class="icon-github"></i></b>
																Github project page
															</a>
														</td>
													</tr>
												</tbody>
											</table>
										</div>
									</div>
								</div>
							</div>
							<!-- /handsontable -->

					</div>
					<!-- /left content -->


					<!-- Right sidebar component -->
					<div class="sidebar-sticky w-100 w-md-auto order-1 order-md-2">
						<div class="sidebar sidebar-light sidebar-component sidebar-component-right sidebar-expand-md mb-3">
							<div class="sidebar-content">
								<div class="card">
									<div class="card-header bg-transparent header-elements-inline">
										<span class="text-uppercase font-size-sm font-weight-semibold">Page navigation</span>
										<div class="header-elements">
											<div class="list-icons">
						                		<a class="list-icons-item" data-action="collapse"></a>
					                		</div>
				                		</div>
									</div>

									<div class="card-body">
										<a href="http://themeforest.net/user/kopyov" class="btn bg-blue btn-block" target="_blank"><i class="icon-reading mr-2"></i> Contact author</a>
									</div>

									<ul class="nav nav-sidebar nav-scrollspy" data-nav-type="accordion">
										<li class="nav-item-header pt-0"><div class="text-uppercase font-size-xs line-height-xs">Sections</div> <i class="icon-menu"></i></li>
										<li class="nav-item"><a href="#data" class="nav-link">Data Tables</a></li>
										<li class="nav-item"><a href="#footable" class="nav-link">Footable Library</a></li>
										<li class="nav-item"><a href="#handsontable" class="nav-link">Handsontable Library</a></li>
										<li class="nav-item-divider"></li>
										<li class="nav-item"><a href="#" class="nav-link">Go to top <i class="icon-circle-up2 mr-0 ml-auto"></i></a></li>
									</ul>
								</div>
				            </div>
						</div>
					</div>
					<!-- /right sidebar component -->

				</div>
				<!-- /inner container -->

			</div>
			<!-- /content area -->


			<!-- Footer -->
			<div class="navbar navbar-expand-lg navbar-light">
				<div class="text-center d-lg-none w-100">
					<button type="button" class="navbar-toggler dropdown-toggle" data-toggle="collapse" data-target="#navbar-footer">
						<i class="icon-unfold mr-2"></i>
						Footer
					</button>
				</div>

				<div class="navbar-collapse collapse" id="navbar-footer">
					<span class="navbar-text">
						&copy; 2015 - 2018. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
					</span>

					<ul class="navbar-nav ml-lg-auto">
						<li class="nav-item"><a href="https://themeforest.net/item/limitless-responsive-web-application-kit/13080328?ref=kopyov" class="navbar-nav-link font-weight-semibold"><span class="text-pink-400"><i class="icon-cart2 mr-2"></i> Purchase</span></a></li>
					</ul>
				</div>
			</div>
			<!-- /footer -->

		</div>
		<!-- /main content -->

	</div>
	<!-- /page content -->

</body>
</html>
